<template>
  <div class="whole">

    <el-form :inline="true" :model="formInline" class="demo-form-inline" >
      <el-form-item>
        <el-input v-model="formInline.user" placeholder="用户名"></el-input>
      </el-form-item>
      <el-form-item>
        <el-select v-model="formInline.region" placeholder="电话">
          <el-option label="电话一" value="shanghai"></el-option>
          <el-option label="电话二" value="beijing"></el-option>
        </el-select>
      </el-form-item>
        <el-button type="primary" round @click="onSubmit">查询</el-button>

        
        <el-button type="danger" @click="userExit" style="float:right;">注销</el-button>
        <el-button type="primary" icon="el-icon-plus" style="float:right;" circle></el-button>

    </el-form>
    
    <!-- .filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))" -->
    <el-table 
    :data="tableData"
    style="width: 100%">
    <el-table-column prop="index" label="序号" type="index" ></el-table-column>
    <el-table-column prop="id" label="用户ID"></el-table-column>
    <el-table-column prop="username" label="用户名"></el-table-column>
    <el-table-column prop="phone" label="电话"></el-table-column>
    <el-table-column prop="status" label="用户状态">
      <template slot-scope="scope">
        <div slot="reference" class="name-wrapper">
          <el-tag size="medium" :type="scope.row.status === 0 ? 'primary' : 'success'"
          disable-transitions>{{ scope.row.status == 0?'异常':'正常'}}</el-tag>
        </div>
      </template>
    </el-table-column>

    <el-table-column prop="email" label="电子邮件"></el-table-column>
    <el-table-column
      align-items="center" label="操作">
      <template slot-scope="scope">
        <el-button
          type="primary"
          icon="el-icon-edit"
          circle
          size="mini"
          @click="handleEdit(scope.$index, scope.row)"></el-button>
        <el-button
          size="mini"
          icon="el-icon-delete"
          type="danger"
          circle
          @click="handleDelete(scope.$index, scope.row)"></el-button>
      </template>
    </el-table-column>
  </el-table>

  <!-- :current-page="currentPage4" -->
  <div class="block">
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
    :current-page="queryInfo.pagenum" :page-size="queryInfo.pagesize" :page-sizes="[1, 2, 5, 10]" 
      layout="total, sizes, prev, pager, next ,jumper" :total="total">
  </el-pagination>

  </div>

  </div>
</template>

<script>
  export default {
    
    data() {
      return {
        username:'',
        phone:'',
        pageNo:1,
        pageSize:10,
        total:0,
        queryInfo:{
          query:'',
          pagenum:1,
          pageSize:10
        },
        tableData: [],
        search: '',
        formInline:{
          user: '',
          region: ''
        }
        }
    },
    methods: {
      getInfoList(){
        this.$http.get('/user/list',{
        params:{
          pageNo:this.pageNo,
          pageSize:this.pageSize
        }
      }).then(res => {       
        const info = res.data
        this.tableData = res.data.data.rows
        this.total=res.data.data.total
      }).catch()
      },
      handleEdit(index, row) {
        console.log(index, row);
      },
      handleDelete(index, row) {
        console.log(index, row);
      },
      handleSizeChange(newsize) {
        this.pageSize = newsize;
        console.log(newsize)
        this.getInfoList();
      },
      handleCurrentChange(newPage) {
        this.pageNo = newPage
        this.getInfoList();
      },
      onSubmit() {
        console.log('submit!');
      },
      userExit(){
        console.log("要退出了");
        let mytoken = this.$store.state.token
        console.log(this.$store.state.token+'退出开始');
        this.$http.post('/user/logout',null,{headers:{
          'X-Token':mytoken
        }}).then(res=>{
          const info = res.data
          console.log(info);
          this.$store.commit('RESET_STATE');
        }).catch(()=>{console.log('退出失败')})
        this.$router.replace('/');
        console.log(this.$store.state.token+'退出成功');
      }
    },
    created(){
      this.$http.get('/user/list',{
        params:{
          username: this.username,
          phone: this.phone,
          pageNo:this.pageNo,
          pageSize:this.pageSize
        }
      }).then(res => {       
        const info = res.data
        this.tableData = res.data.data.rows
        this.total=res.data.data.total
      }).catch()

    },

    // mounted:function(){
    //   console.log("haha");
    //   console.log(this.$store.state.token);

    //   axios.interceptors.request.use(
    //     config => {   
    //     const token = this.$store.state.token        
    //     token && (config.headers.token = token) //在请求头中添加
    //     return config
    //     },
    //     error => {
    //     return Promise.error(error)
    //   })

    // }
  }
    
  
</script>

<style>
  .whole{
    width: 90%;
    margin: 10px auto;
  }
  .el-table{
    margin: 0 auto;
  }
  .el-table-column{
    align-items: center;
  }

</style>